<template>
    <div>
        <!-- 用户导航栏 -->
        <van-row class="container">
            <van-col span="5">
                <van-image
                    width="70"
                    height="70"
                    :src="
                        userInfo.avatar ? userInfo.avatar : 'https://img01.yzcdn.cn/vant/cat.jpeg'
                    "
                    round
                    lazy-load
                />
            </van-col>
            <van-col span="16">
                <h3>
                    <span @click="showDialog" v-if="!userInfo.username">用户登录</span>
                    <span v-else>{{ userInfo.username }}</span>
                </h3>
            </van-col>
            <van-col span="3">
                <div class="arrow">
                    <van-icon
                        name="guide-o"
                        color="white"
                        size="20px"
                        @click="showDialog"
                        v-if="!userInfo.username"
                    />
                    <van-icon name="cross" color="#fff" size="20px" v-else @click="exitUser" />
                </div>
            </van-col>
        </van-row>
        <!-- 宫格 -->
        <van-grid column-num="3">
            <van-grid-item
                :icon="item.icon"
                :text="item.text"
                v-for="(item, index) in list"
                :key="index"
                @click="handle"
            />
        </van-grid>
        <!-- 登录弹窗处理 -->
        <van-dialog
            v-model="show"
            :show-cancel-button="false"
            :show-confirm-button="false"
            title="百货商城"
        >
            <div class="textBox"></div>
            <van-form :show-error="false" ref="form">
                <van-field
                    label-width="43px"
                    v-model="username"
                    name="username"
                    label="账号"
                    placeholder="输入账号"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    label-width="43px"
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-form>
            <van-row type="flex" justify="space-around">
                <van-col span="6">
                    <button class="btn" @click="closeDialog">取消</button>
                </van-col>
                <van-col span="6">
                    <button class="btn" @click="enterDialog">确定</button>
                </van-col>
            </van-row>
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'Cart',
    data() {
        return {
            show: false,
            username: '',//管理员账号admin
            password: '',//管理员密码123456
            userInfo: '',

            list: [
                {
                    text: '我的订单',
                    icon: 'label-o'
                },
                {
                    text: '优惠卷',
                    icon: 'bill-o'
                },
                {
                    text: '余额',
                    icon: 'balance-o'
                },
                {
                    text: '我的收藏',
                    icon: 'like-o'
                },
                {
                    text: '我的足迹',
                    icon: 'flag-o'
                },
                {
                    text: '会员福利',
                    icon: 'vip-card-o'
                },
                {
                    text: '地址管理',
                    icon: 'location-o'
                },
                {
                    text: '账号安全',
                    icon: 'shield-o'
                },
                {
                    text: '联系客服',
                    icon: 'service-o'
                },
                {
                    text: '帮助中心',
                    icon: 'question-o'
                },
                {
                    text: '意见反馈',
                    icon: 'smile-comment-o'
                }
            ]
        }
    },

    methods: {
        // 点击❌号
        exitUser() {
            this.$dialog
                .confirm({
                    message: '退出当前账号'
                })
                .then(() => {
                    window.sessionStorage.removeItem('token')
                    window.sessionStorage.removeItem('userInfo')
                    this.userInfo = ''
                })
                .catch(() => {
                    // on cancel
                })
        },
        // 点击 弹窗确定按钮
        enterDialog() {
            this.$refs.form
                .validate()
                .then(res => {
                    if (!res) {
                        this.show = false
                        this.$http
                            .post('/auth/loginByWeb', {
                                username: this.username,
                                pwd: this.password
                            })
                            .then(res => {
                                const { data } = res.data
                                if (res.data.errno != 0) {
                                    this.$dialog.alert({
                                        message: '账号或密码错误'
                                    })
                                    return
                                }
                                window.sessionStorage.setItem('token', data.token)
                                window.sessionStorage.setItem(
                                    'userInfo',
                                    JSON.stringify(data.userInfo)
                                )
                                this.userInfo = data.userInfo
                            })
                            .catch(err => {
                                console.log(err)
                            })
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        // 点击登录按钮 或者小箭头
        showDialog() {
            this.username = 'admin'
            this.password = '123456'
            this.show = true
        },
        //点击弹窗的取消按钮
        closeDialog() {
            this.show = false
            this.$refs.form.resetValidation()
        },
        //点击子宫格
        handle() {
            this.$toast({
                message: '该功能暂未开放'
            })
        }
    },
    mounted() {
        let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
        if (!userInfo) {
            this.userInfo = ''
        } else {
            this.userInfo = userInfo
        }
    }
}
</script>
<style scoped>
.container {
    background-color: #333333;
    padding: 20px 10px 10px 10px;
}
h3 {
    font-size: 20px;
    color: white;
    margin-top: 25px;
    margin-left: 5px;
}
.arrow {
    margin-left: 15px;
    margin-top: 20px;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
.textBox {
    width: 100%;
    height: 20px;
}
.btn {
    padding: 15px 0;
    font-size: 15px;
    border: 0;
    display: inline-block;
    background-color: transparent;
}
</style>